<template>
  <div class="import-export-container">
    <!-- 导入功能 -->
    <el-upload
      class="upload-area"
      action="/api/questions/import"
      :headers="headers"
      :on-success="handleImportSuccess"
      :on-error="handleImportError"
      :before-upload="beforeImport"
    >
      <el-button type="primary">
        <el-icon><Upload /></el-icon>
        导入试题
      </el-button>
      <template #tip>
        <div class="upload-tip">
          支持Excel文件导入，
          <el-link type="primary" @click="downloadTemplate">
            下载模板
          </el-link>
        </div>
      </template>
    </el-upload>

    <!-- 导出功能 -->
    <div class="export-area">
      <el-button type="success" @click="showExportDialog">
        <el-icon><Download /></el-icon>
        导出试题
      </el-button>
    </div>

    <!-- 导出配置对话框 -->
    <el-dialog
      v-model="exportDialogVisible"
      title="导出试题"
      width="500px"
    >
      <el-form
        ref="exportForm"
        :model="exportConfig"
        label-width="100px"
      >
        <el-form-item label="试题类型">
          <el-checkbox-group v-model="exportConfig.types">
            <el-checkbox label="single">单选题</el-checkbox>
            <el-checkbox label="multiple">多选题</el-checkbox>
            <el-checkbox label="blank">填空题</el-checkbox>
            <el-checkbox label="programming">编程题</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="难度等级">
          <el-checkbox-group v-model="exportConfig.difficulties">
            <el-checkbox label="easy">简单</el-checkbox>
            <el-checkbox label="medium">中等</el-checkbox>
            <el-checkbox label="hard">困难</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="导出格式">
          <el-radio-group v-model="exportConfig.format">
            <el-radio label="excel">Excel</el-radio>
            <el-radio label="word">Word</el-radio>
            <el-radio label="pdf">PDF</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="包含答案">
          <el-switch v-model="exportConfig.includeAnswer" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exportDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleExport">
            开始导出
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Upload, Download } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

const headers = {
  Authorization: `Bearer ${authStore.token}`
}

// 导入相关
const handleImportSuccess = (response) => {
  ElMessage.success(`成功导入${response.count}道试题`)
}

const handleImportError = () => {
  ElMessage.error('导入失败，请检查文件格式')
}

const beforeImport = (file) => {
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  if (!isExcel) {
    ElMessage.error('只能上传Excel文件!')
    return false
  }
  return true
}

const downloadTemplate = () => {
  // 实现下载模板逻辑
  window.open('/api/questions/template')
}

// 导出相关
const exportDialogVisible = ref(false)
const exportConfig = reactive({
  types: ['single', 'multiple'],
  difficulties: ['easy', 'medium', 'hard'],
  format: 'excel',
  includeAnswer: true
})

const showExportDialog = () => {
  exportDialogVisible.value = true
}

const handleExport = () => {
  // 实现导出逻辑
  const queryString = new URLSearchParams({
    types: exportConfig.types.join(','),
    difficulties: exportConfig.difficulties.join(','),
    format: exportConfig.format,
    includeAnswer: exportConfig.includeAnswer
  }).toString()

  window.open(`/api/questions/export?${queryString}`)
  exportDialogVisible.value = false
  ElMessage.success('开始导出，请稍候...')
}
</script>

<style scoped>
.import-export-container {
  margin: 20px 0;
  display: flex;
  gap: 20px;
}

.upload-tip {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}
</style> 